<template>
	<view>
		
		<view class='martop'>
		
			<!-- 播放历史 -->
			<view class="uni-title" v-show="playHistoryData.length">播放历史</view>
			
			<view class="seven martom" v-show="playHistoryData.length">
				<view class="uni-media-list" @click="getAudioData(obj)" v-for="(obj, index) in playHistoryData" :key="index">
					<!-- 歌曲名称 -->
					<view class="uni-media-list-body">
						<!-- 歌曲名 -->
						<view class="uni-media-list-body-top">{{obj.audioDetail.name}}</view>
						<!-- 第一个歌手名 -->
						<view class="uni-media-list-body-bottom">{{obj.audioDetail.artist}}</view>
					</view>
				</view>
			</view>
		
		</view>
		
	</view>
</template>

<script>
	import Vuex from 'vuex'
	export default {
		computed: {
			...Vuex.mapState(['playHistoryData'])
		},
		methods: {
			...Vuex.mapActions(['getAudioData']),
		}
	}
</script>

<style>
	
	
	/* 底部100外边距 */
	.martom {
		margin-bottom: 100upx;
	}
	
	.martop {
		margin-top: 100upx;
	}
	
	/* uni样式覆盖 */
	.uni-media-list {
		padding: 0 10upx;
		border-top: 1upx solid red;
	}
	.uni-media-list-body {
		padding: 0 50upx 10upx;
		color: red;
		font-weight: bold;
	}
	.uni-media-list-body-bottom {
		padding: 0 10upx;
		font-size: 10upx;
		font-weight: normal;
		color: white;
		background-color: black;
	}
	
</style>
